<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-06-06 17:03:51
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-08-10 16:37:40
 * @FilePath: \ship-schedule-ui\src\widgets\demo\sample-pannel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <mars-dialog :draggable="false" top="10" right="10" :width="400" :height="800">
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">多线船闸对过闸时间的关系</span>
      </div>
      <div id="echartsView4" style="width: 100%; height: 180px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">单次过闸调度与过闸时间的关系</span>
      </div>
      <div id="echartsView5" style="width: 100%; height: 180px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">载货种类统计</span>
      </div>
      <div id="echartsView6" style="width: 100%; height: 250px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { onUnmounted, onMounted } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as echarts from "echarts"
import * as mapWork from "./map"

import { GetDurationByLine, GetDurationBySumLoad, GetDurationByGoods } from "@mars/common/api/modules/ship"

// 启用map.ts生命周期
useLifecycle(mapWork)

let myChart4: any
let myChart5: any
let myChart6: any
onMounted(() => {
  myChart4 = echarts.init(document.getElementById("echartsView4"), "dark")
  myChart5 = echarts.init(document.getElementById("echartsView5"), "dark")
  myChart6 = echarts.init(document.getElementById("echartsView6"), "dark")

  queryData4()
  queryData5()
  queryData6()
})

const resize = () => {
  myChart4.resize()
  myChart5.resize()
  myChart6.resize()
}

function queryData4() {
  GetDurationByLine(null).then((res) => {
    if (res.ResultType === "Success") {
      showChart4(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function queryData5() {
  GetDurationBySumLoad(null).then((res) => {
    if (res.ResultType === "Success") {
      showChart5(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function queryData6() {
  GetDurationByGoods(null).then((res) => {
    if (res.ResultType === "Success") {
      showChart6(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function showChart4(data) {
  const xArr = []
  const yArr = []
  data.forEach((element) => {
    xArr.push(element.Part)
    yArr.push((element.Cost_Time / element.Count / 3600).toFixed(2))
  })

  const option = {
    tooltip: {
      trigger: "item"
    },
    grid: {
      top: "5%",
      left: "0%",
      width: "100%",
      height: "95%",
      containLabel: true
    },
    xAxis: {
      data: xArr,

      axisLabel: {
        show: true,
        interval: 0,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 1
        }
      }
    },

    yAxis: {
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 1
        }
      },
      splitLine: {
        show: false
      }
    },

    series: {
      name: "",
      type: "bar",
      barWidth: 12,
      data: yArr,
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 5, 5],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3876cd"
            },
            {
              offset: 0.5,
              color: "#45b4e7"
            },
            {
              offset: 1,
              color: "#54ffff"
            }
          ])
        }
      }
    }
  }
  myChart4.setOption(option)
}

function showChart5(data) {
  const xArr = []
  const yArr1 = []
  const yArr2 = []
  data.forEach((element) => {
    xArr.push(element.Part)
    yArr1.push(element.Cost_Time / element.Count / 3600)
    yArr2.push(element.Real_Load / element.Count)
  })

  const option = {
    tooltip: {
      trigger: "item"
    },
    grid: {
      top: "18%",
      bottom: "10%",
      left: "5%",
      right: "5%",
      // width: "90%",
      // height: "85%",
      containLabel: true
    },
    xAxis: {
      name: "吨级",
      data: xArr,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 25,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        interval: 0,
        lineStyle: {
          color: "#fff",
          width: 1
        }
      }
    },

    yAxis: [
      {
        name: "平均过闸时长",
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: "12px",
            color: "#fff"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 1
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        name: "平均载货量",
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: "12px",
            color: "#fff"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 1
          }
        },
        splitLine: {
          show: false
        }
      }
    ],

    series: [
      {
        name: "平均过闸时长",
        type: "bar",
        barWidth: 12,
        data: yArr1,
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 5, 5],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#3876cd"
              },
              {
                offset: 0.5,
                color: "#45b4e7"
              },
              {
                offset: 1,
                color: "#54ffff"
              }
            ])
          }
        }
      },
      {
        name: "平均载货量",
        type: "line",
        barWidth: 12,
        data: yArr2,
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 5, 5],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#3876cd"
              },
              {
                offset: 0.5,
                color: "#45b4e7"
              },
              {
                offset: 1,
                color: "#54ffff"
              }
            ])
          }
        }
      }
    ]
  }
  myChart5.setOption(option)
}
function showChart6(data) {
  const xArr = []
  let otherCount = 0
  data.forEach((element) => {
    xArr.push({ value: element.Count, name: element.Part })
    otherCount = element.Total_Count - element.Count - otherCount
  })
  // xArr.push({ value: otherCount, name: "其他" })

  const option = {
    tooltip: {
      trigger: "item"
    },
    // legend: {
    //   top: "5%",
    //   left: "left"
    // },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        // avoidLabelOverlap: false,
        // label: {
        //   show: false,
        //   position: "center"
        // },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: xArr
      }
    ]
  }
  myChart6.setOption(option)
}
onUnmounted(() => {
  if (myChart4) {
    myChart4.dispose()
  }
})
</script>
<style lang="less">
.item {
  margin-bottom: 10px;
}
.itemTit {
  padding: 10px 30px;
}
.itemTit span {
  height: 20px;
  line-height: 20px;
  border-left: 4px solid transparent;
  font-size: 17px;
}
</style>
